<template>
  <SearchForm  @handleReset="resetForm()" @handleSearch="submitQueryForm(queryFormRef)">
    <el-form ref="queryFormRef" :inline="true" :model="userQueryForm" class="demo-form-inline" >
      <!-- form表单的prop要写在<el-form-item>标签中，对应里面<input>标签的model的值，这样才能使用reset重置和submit时的参数校验 -->
      <el-form-item>
        <el-input v-model="userQueryForm.userName" placeholder="请输入用户名" clearable />
      </el-form-item>
      <el-form-item>
        <el-input v-model="userQueryForm.realName" placeholder="请输入姓名" clearable />
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="submitQueryForm(queryFormRef)">查询</el-button>
        <el-button @click="resetForm(queryFormRef)">重置</el-button>
        <el-button type="primary" @click="onAddOrUpdate()">新增</el-button>
      </el-form-item> -->
    </el-form>
    <template #header>
        <el-button type="primary" @click="onAddOrUpdate()">新增</el-button>
    </template>
  </SearchForm>
  <el-scrollbar>
      <div class="table">
      <el-table :data="tableData" border stripe width="100%">
        <el-table-column label="用户名" prop="userName" align="center" />
        <el-table-column label="姓名" prop="realName" align="center" />
        <el-table-column label="邮箱" prop="email" align="center" />
        <el-table-column label="角色" prop="roleName" align="center" />
        <el-table-column label="创建时间" prop="createTime" align="center" width="200">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="onAddOrUpdate(scope.row)">编辑</el-button>
            <el-button type="danger" link @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页，
        background是样式，就是分页有背景色，
        layout就是分页插件展示的内容，且按照配置的顺序，total-总条数，prev-前一页按钮，pager-页数按钮，next-后一页按钮，sizes-设置每页展示多少条的可选项，
        :total就是数据总条数，在查询表数据时返回的，并给total参数赋值了，
        current-page就是当前页，绑定formInline的page参数，查询的时候就可以直接拿到值传参了，
        page-size就是每页条数，绑定formInline的size参数，查询的时候就可以直接拿到值传参了，
        @size-change就是改变每页条数时触发的事件，
        @current-change就是改变页数时触发的事件
        -->
      <el-pagination 
        background 
        layout="total, prev, pager, next, sizes" 
        :total="total"
        v-model:current-page="userQueryForm.page" 
        v-model:page-size="userQueryForm.size"  
        :page-sizes="[10, 20, 50, 100]" 
        @size-change="submitQueryForm(queryFormRef)"
        @current-change="submitQueryForm(queryFormRef)"
      />
    </div>
    </el-scrollbar>
    <!--新增编辑的弹框-->
    <AddOrUpdate ref="addOrUpdateRef" @refresh="onSubmit" />
</template>
<script lang="ts" setup>
import { reactive,ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { formatDate } from '../../composables/utils';
import AddOrUpdate from './AddUser.vue';
import { postWithToken } from '../../composables/utils';

const queryFormRef = ref<FormInstance>();
const addOrUpdateRef = ref();
const tableData = ref<any>(null);
const total = ref<number>(0);
// 展示弹框的参数
const isShowDialog = ref(false);
// 列表查询的form
const userQueryForm = reactive({
  userName: '',
  realName: '',
  page: 1,
  size: 10
});
// 弹框里面的form
const updateForm = reactive<UpdateUserForm>({
    id:null,
    userName: '',
    realName:'',
    email: ''
});
// 弹框里面的form对应的interface
interface UpdateUserForm {
  id:number | null;
  userName: string;
  realName:string;
  email:string;
}

// 查询
const submitQueryForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      onSubmit();
    } else {
      console.log('error submit!')
    }
  })
};
// 重置
const resetForm = () => {
  userQueryForm.userName = '';
  userQueryForm.realName = '';
}

// 分页查询
const onSubmit = async () => {
  try {
    const response = await postWithToken('/user/pageUser', userQueryForm);
    if (response.code != 200) {
        ElMessage.error(response.msg);
    } else {
      // 设置表数据
      tableData.value = response.data;
      // 设置分页参数的total
      total.value = response.total;
    }
  } catch (error) {
    console.error('There was an error!', error);
  }
};

onSubmit();

// 新增或更新的弹框输入框赋值
const onAddOrUpdate = (data?: any) => {
  addOrUpdateRef.value.init(data);
};

// 删除数据
const onDelete = async (data?: any) => {
  try {
    const response = await postWithToken('/user/deleteUser', data);
    if (response.code != 200) {
        ElMessage.error(response.msg);
    }
    submitQueryForm(queryFormRef.value);
  } catch (error) {
    console.error('There was an error!', error);
  }
};

</script>
<style lang="scss">
/* 为了页面刷新不出现滚动条 */
.ep-scrollbar {
  height: auto;
}
</style>